<template>
	<view class="technician-account-bind" :style="{background:pageColor}" v-if="isLoad">
		<!-- #ifndef MP-WEIXIN -->
		<view class="space-md"></view>
		<view @tap.stop="toEditAccount(1)" class="ml-md mr-md pd-lg fill-base list-item flex-warp radius-16">
			<view class="item-icon alipay flex-center">
				<i class="iconfont icon-alipay-fill icon-font-color"></i>
			</view>
			<view class="flex-1 ml-md">
				<view class="flex-y-center f-paragraph text-bold">支付宝账号绑定</view>
				<view class="flex-between">
					<view class="f-caption c-paragraph">
						{{agentCashAccount.alipay_number ? agentCashAccount.split_alipay_number : '暂无'}}
					</view>
					<view class="flex-y-center f-desc" :style="{color:primaryColor}"
						v-if="!userInfo.agent_account_login">
						{{agentCashAccount.alipay_number?'修改':'去设置'}}<i class="iconfont icon-right text-bold"></i>
					</view>
				</view>
			</view>
		</view>
		<!-- #endif -->
		<view class="space-md"></view>
		<view @tap.stop="toEditAccount(2)" class="ml-md mr-md pd-lg fill-base list-item flex-warp radius-16"
			v-if="configInfo.plugAuth.adapay||configInfo.plugAuth.heepay">
			<view class="item-icon card flex-center">
				<i class="iconfont iconcard icon-font-color"></i>
			</view>
			<view class="flex-1 ml-md">
				<view class="flex-between">
					<view class="flex-y-center f-paragraph text-bold">银行卡账号绑定</view>
					<view @tap.stop="$refs.show_faile_reason.open()" class="flex-y-center f-desc c-warning"
						v-if="configInfo.plugAuth.adapay&&agentCashAccount.faile_reason&&agentCashAccount.bank_status!=-1">
						驳回原因
						<i class="iconfont iconwentifankui3" style="color: #F13F26;margin-left:5rpx"></i>
					</view>
				</view>
				<view class="flex-between">
					<view class="flex-y-center f-caption c-paragraph">
						{{agentCashAccount.bank_card_id ? agentCashAccount.split_card_id : configInfo.plugAuth.heepay?'请联系平台添加':'暂无'}}
						<view class="ml-md c-alipay" v-if="agentCashAccount.check_status==1">
							审核中
						</view>
						<view class="ml-md" :class="[colorType[agentCashAccount.bank_status]]"
							v-else-if="agentCashAccount.bank_status!=-1">
							{{adapayStatusType[agentCashAccount.bank_status]}}
						</view>
					</view>
					<view class="flex-y-center f-desc"
						v-if="configInfo.plugAuth.adapay && !userInfo.agent_account_login">
						<view class="flex-y-center c-warning mr-md" @tap.stop="toDelBanck" :style="{color:'#F13F26'}"
							v-if="agentCashAccount.bank_card_id && agentCashAccount.bank_status != 0">
							删除<i class="iconfont icon-del text-bold"></i>
						</view>
						<view class="flex-y-center" :style="{color:primaryColor}">
							<view v-if="agentCashAccount.bank_status != 0">
								{{agentCashAccount.bank_card_id ?'修改':'去设置'}}
							</view>
							<i class="iconfont icon-right text-bold"></i>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="space-footer"></view>
		<uni-popup ref="show_faile_reason" type="center" :maskClick="false">
			<view class="common-popup-content fill-base pd-lg radius-34">
				<view class="title">驳回原因</view>
				<view class="f-desc c-title mt-lg" style="width:100%;max-height: 50vh;overflow-y: auto;">
					<text decode="emsp" style="word-break:break-all;">{{agentCashAccount.faile_reason}}</text>
				</view>
				<view class="button">
					<view @tap.stop="$refs.show_faile_reason.close()" class="item-child"
						:style="{background: primaryColor,color:'#fff'}">知道了</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				isLoad: false,
				adapayStatusType: {
					0: '审核中',
					1: '审核通过',
					2: '审核失败'
				},
				colorType: {
					0: 'c-alipay',
					1: 'c-success',
					2: 'c-warning'
				},
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
			agentCashAccount: state => state.user.agentCashAccount,
		}),
		onLoad() {
			this.$util.setNavigationBarColor({
				bg: this.primaryColor
			})
			this.initIndex()
		},
		methods: {
			...mapActions(['getConfigInfo', 'getAgentAccount']),
			...mapMutations(['updateUserItem']),
			async initIndex(refresh = false) {
				await this.getAgentAccount()
				this.isLoad = true
				// #ifdef H5
				if (!refresh) {
					this.$jweixin.hideOptionMenu()
				}
				// #endif
			},
			initRefresh() {
				this.initIndex(true)
			},
			toEditAccount(type) {
				let {
					adapay
				} = this.configInfo.plugAuth
				let {
					agent_account_login
				} = this.userInfo
				if ((type == 2 && !adapay) || agent_account_login) return
				let url = `/user/pages/alipay-account`
				if (type == 2) {
					url = `/user/pages/bank-account?type=3`
				}
				this.$util.goUrl({
					url
				})
			},
			async toDelBanck() {
				let [res_del, {
					confirm
				}] = await uni.showModal({
					content: `请确认是否要删除银行卡？`,
				})
				if (!confirm) return
				await this.$api.mine.memberStatusUpdate({
					status: -1
				})
				this.$util.showToast({
					title: `删除成功`
				})
				await this.getAgentAccount()
			},
		}
	}
</script>

<style lang="scss">
	.technician-account-bind {
		.list-item {

			.item-icon {

				width: 70rpx;
				height: 70rpx;
				border-radius: 35rpx;

				.iconfont {
					font-size: 44rpx;
				}
			}


			.item-icon.alipay {
				background: #E9F5FE;

				.iconfont {
					background-image: linear-gradient(180deg, #46BCFF 0%, #2587FF 100%, #1976FF 100%);
				}
			}

			.item-icon.card {
				background: #FDF3EB;

				.iconfont {
					background-image: linear-gradient(180deg, #F89146 0%, #F99146 100%, #F98146 100%);
				}
			}

			.f-paragraph {
				height: 70rpx;
				color: #2E3541
			}

			.icon-del {
				font-size: 24rpx;
				margin-left: 5rpx;
			}

			.icon-right {
				font-size: 22rpx;
			}
		}
	}
</style>